<script setup lang="ts">
import {inject} from "vue";
import useTaskStore from "@/store/task";
import {appConfigType} from "@/types/component/core";

const taskStore = useTaskStore()
const appConfig: appConfigType | undefined = inject('appConfig')
const setWindowOpacity:Function = inject('setWindowOpacity')

const close = () => {
  setWindowOpacity(0)
  setTimeout(() => {
    taskStore.CLOSE_APP(appConfig.value.name)
  },300)
}
const hide = () => {
  setWindowOpacity(0)
  setTimeout(() => {
    taskStore.HIDDEN_APP(appConfig.value.name)
  },300)
}
const full = () => {
  if (appConfig?.value.isFull) {
    taskStore.CANCEL_FULL(appConfig?.value.name)
  } else {
    taskStore.FULL_APP(appConfig?.value.name)
  }
}

</script>
<template>
  <div class="window-head" @dblclick="full">
    <div class="left-info">
      <component :is="appConfig.headIcon"></component>
      <div class="window-title">{{ appConfig.title }}</div>
    </div>
    <div class="right-control">
      <div class="material-icons" @click.prevent="full">fullscreen</div>
      <div class="material-icons" @click.prevent="hide">remove</div>
      <div class="material-icons" @click.prevent="close">clear</div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.window-head {
  height: 35px;
  display: flex;
  justify-content: space-between;
  cursor: move;
  border-bottom: 1px solid #E3E9F0;

  .left-info {
    padding-left: 12px;
    display: flex;
    height: 35px;
    line-height: 35px;
    align-items: center;
    justify-content: center;
    user-select: none;

    .material-icons {
      font-size: 24px;
    }

    .window-title {
      margin-left: 8px;
      font-size: 12px;
      font-weight: 600;
      color: #5D666F;
    }
  }

  .right-control {
    display: flex;
    height: 35px;
    padding-right: 10px;
    line-height: 35px;
    align-items: center;
    user-select: none;

    .material-icons {
      font-size: 24px;
      line-height: 24px;
      color: #969CA2;
      cursor: pointer;
      margin: 0 5px;

    }

    .material-icons:hover {
      color: #5D666F;
    }
  }
}
</style>
